<template>
  <div>
    <div class="section-title">每日推荐</div>
    <div>
      <template v-for="item in recList">
        <RecCard :data="item" @click="goToProfile(item.id)" />
      </template>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import RecCard, { RecommendData } from '@/components/pages/recommend/RecCard.vue'

export const recList: RecommendData[] = [
  {
    id: 1,
    name: '舒军',
    age: 26,
    avatar: 'src/assets/img/profile.png',
    profession: '程序员',
    height: 173,
    xueli: '硕士',
    income: 2000,
    houseNum: 1,
    desc: '毕业于上海大学，在华为上班，生活圈子小，休息时间挺多，积极乐观安稳，平时喜欢做家务，养绿植，打乒乓球',
    favor: false,
  },
  {
    id: 2,
    name: '韩立',
    age: 27,
    avatar: 'src/assets/img/profile2.png',
    profession: '修仙者',
    height: 163,
    xueli: '研究生',
    income: 200000,
    houseNum: 0,
    desc: '毕业于上海大学，在华为上班，生活圈子小，休息时间挺多，积极乐观安稳，平时喜欢做家务，养绿植，打乒乓球',
    favor: true,
  },
  {
    id: 3,
    name: '韩立',
    age: 27,
    avatar: 'src/assets/img/profile2.png',
    profession: '修仙者',
    height: 163,
    xueli: '研究生',
    income: 200000,
    houseNum: 0,
    desc: '毕业于上海大学，在华为上班，生活圈子小，休息时间挺多，积极乐观安稳，平时喜欢做家务，养绿植，打乒乓球',
    favor: true,
  },
  {
    id: 4,
    name: '韩立',
    age: 27,
    avatar: 'src/assets/img/profile2.png',
    profession: '修仙者',
    height: 163,
    xueli: '研究生',
    income: 200000,
    houseNum: 0,
    desc: '毕业于上海大学，在华为上班，生活圈子小，休息时间挺多，积极乐观安稳，平时喜欢做家务，养绿植，打乒乓球',
    favor: true,
  },
  {
    id: 5,
    name: '韩立',
    age: 27,
    avatar: 'src/assets/img/profile2.png',
    profession: '修仙者',
    height: 163,
    xueli: '研究生',
    income: 200000,
    houseNum: 0,
    desc: '毕业于上海大学，在华为上班，生活圈子小，休息时间挺多，积极乐观安稳，平时喜欢做家务，养绿植，打乒乓球',
    favor: true,
  },
]

export default defineComponent({
  components: {
    RecCard,
  },
  setup() {
    return {
      recList
    }
  },
  methods: {
    goToProfile(userId: number) {
      this.$router.push({
        name: '用户详情',
        params: {
          userId: userId
        }
      });
    }
  }
})
</script>


<style lang="stylus" scoped>

.section-title
  font-size .32rem
  color #001833
  // margin-left .3rem
</style>